<template>
  <!-- JS逆向工具页面外层容器 -->
  <div class="reverse-tools-container">
    <h2>JS逆向工具</h2> <!-- 页面主标题 -->
    <!-- 遍历工具分组，每组一个大类 -->
    <div class="tool-group" v-for="(group, index) in toolGroups" :key="index">
      <h3>{{ group.name }}</h3> <!-- 分组名称 -->
      <!-- 遍历每组下的工具列表 -->
      <div class="tool-item" v-for="(tool, i) in group.tools" :key="i">
        <h4>{{ tool.name }}</h4> <!-- 工具名称 -->
        <p>{{ tool.description }}</p> <!-- 工具描述 -->
        <div class="link-container">
          <a :href="tool.link" target="_blank">{{ tool.link }}</a> <!-- 工具下载/参考链接 -->
          <button @click="openLink(tool.link)" class="jump-btn">跳转</button> <!-- 跳转按钮，点击新窗口打开链接 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 新窗口打开工具链接
    openLink(url) {
      window.open(url, '_blank') // 使用浏览器新标签页打开链接
    }
  },
  data() {
    return {
      // 工具分组数据，每组包含若干工具
      toolGroups: [
        {
          name: '调试工具', // 分组名称
          tools: [
            {
              name: 'WT-JS 多版本下载', // 工具名称
              description: '数据处理\
                          支持数据加密 / 解密、编码转换（如 Base64、URL 编码）。\
                          数据导入导出：兼容多种格式（CSV、JSON），支持批量处理和数据一致性校验。\
                          文件系统操作\
                          文件读写、目录管理、路径解析，支持大文件分段处理。\
                          集成 zip.js 库，实现高效压缩和解压缩（支持 Zip64、加密）。\
                          网络请求与 API 交互\n\
                          \t\t封装 HTTP/HTTPS 请求，支持异步操作和错误处理。\
                          集成 WeTransfer SDK，实现文件上传、传输管理（如大文件分片上传）。\
                          自动化测试框架\
                          支持数据驱动测试、跨浏览器测试，生成详细测试报告。\
                          与 CI/CD 流程集成，提升测试效率和代码质量。', // 工具描述
              link: 'https://bbs.125.la/thread-14734668-1-1.html' // 工具下载链接
            },
            // 可以添加更多工具
            {
              name: "v_jstools",
              description: "调试JS 工具\n\
              1 挂钩页面 api\n\
              2 注入代码\n\
              3 生成js环境代码\n\
              4 js分析代码工具包\n\
                - 文本对比页面（就是一个简单的文本对比工具）\n\
                - JS脚本库（存放了打包好的一些常用的脚本，单脚本使用很方便）\n\
                - AST 语法（用于分析 JS 的 AST 的工具页面）\n\
                - AST 工具（用于简单的 压缩/解压缩/混淆/解混淆 工具，不过由于v3权限，所以能做的有限）\n\
                - AST 分析（直接在当前页面注入一个页面，可以利用当前页面环境中的函数）\n\
                - WASM 分析（直接在当前页面注入一个页面，可以做简单的 WASM 代码的分析",
              link: "https://github.com/cilame/v_jstools"
            }
          ]
        }
        // 可以添加更多工具组
      ]
    }
  }
}
</script>

<style scoped>
.reverse-tools-container {
  padding: 20px; /* 外层容器内边距 */
}
.tool-group {
  margin-bottom: 30px; /* 分组间距 */
}
.tool-item {
  padding: 15px; /* 工具项内边距 */
  border: 1px solid #eee; /* 工具项边框 */
  margin-bottom: 10px; /* 工具项下间距 */
  border-radius: 4px; /* 圆角 */
}
.tool-item p {
  white-space: pre-line; /* 保留换行符，便于多行描述显示 */
  text-align: left; /* 左对齐 */
  margin: 10px 0; /* 上下间距 */
  font-family: monospace; /* 等宽字体，便于技术内容展示 */
  line-height: 1.5; /* 行高 */
}

.link-container {
  display: flex; /* 横向排列链接和按钮 */
  gap: 10px; /* 间距 */
  margin-top: 10px; /* 顶部间距 */
}

.jump-btn {
  padding: 2px 8px; /* 按钮内边距 */
  background: #4285f4; /* 按钮背景色 */
  color: white; /* 字体颜色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停为手型 */
}
</style>